<template>
  <div class="root">
    <!--<div>
      <line-chart></line-chart>
    </div>-->
    <!--<div>
      <area-chart></area-chart>
    </div>-->
    <svg width="0" height="0">
      <defs>
        <filter id="arcBlur">
          <feColorMatrix type="saturate" values="1"></feColorMatrix>
          <feGaussianBlur stdDeviation="0.5"></feGaussianBlur>
        </filter>
      </defs>
      <defs>
        <filter id="Gaussian_Blur">
          <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
        </filter>
      </defs>
    </svg>
<sector-gauge></sector-gauge>
<sector-gauge :radius="45"
              :path="[28, 40, 100, '#005C5E', '#Gaussian_Blur']"
              :text="`0.00`"></sector-gauge>
    <sector-gauge :radius="45"
                  :path="[28, 45, 100, '#00567B','#arcBlur']"
                  :text="`0.00`"></sector-gauge>

  </div>
</template>
<script>
  import VueLineChart from '@/components/d3/VueLineChart'
  import ResponsiveAreaChart from '@/components/d3/ResponsiveAreaChart'

  import AreaChart from '@/components/d3/AreaChart'
  import SectorGauge from '@/components/svg/SectorGauge'
  export default {
    name: 'main',
    components: {
      'line-chart': VueLineChart,
      'area-chart': AreaChart,
      'sector-gauge': SectorGauge,
    }
  }
</script>
<style>
  .root{
    /*width: 500px;
    height: 270px;
    border: solid 1px red;*/
  }
</style>
